<template>
  <div class="load-content">
    <div id="load">
      <div
        v-for="(letter, index) in letters"
        :key="index"
        :style="{ animationDelay: `${index * 0.2}s` }"
      >
        {{ letter }}
      </div>
    </div>
  </div>
</template>

<script setup>
const letters = ['G', 'N', 'I', 'D', 'A', 'O', 'L']
</script>

<style lang="less" scoped>
.load-content {
  width: 100%;
  height: 100%;
  background-color: #000;
}
#load {
  position: absolute;
  width: 600px;
  height: 36px;
  left: 50%;
  top: 40%;
  margin-left: -300px;
  overflow: visible;
  user-select: none;
  cursor: default;
}

#load div {
  position: absolute;
  width: 20px;
  height: 36px;
  opacity: 0;
  font-family: Helvetica, Arial, sans-serif;
  animation: move 2s linear infinite;
  transform: rotate(0);
  color: #35c4f0;
}

@keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }
  35% {
    left: 41%;
    opacity: 1;
  }
  65% {
    left: 59%;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
</style>
